<template>
    <el-dialog :title="titlename" :visible.sync="addVisible" width="50%" :before-close="cancel">
        <el-form
            label-position="left"
            label-width="80px"
            :model="newAdd"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
            status-icon
        >
            <el-form-item
                label="用户名"
                prop="addname"
            >
                <el-input v-model="newAdd.addname" clearable :disabled="newDis"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                    <el-radio v-model="newAdd.addSex" label='男' :disabled="newDis">男</el-radio>
                    <el-radio v-model="newAdd.addSex" label='女' :disabled="newDis">女</el-radio>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="newAdd.addAge" clearable :disabled="newDis"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop='addPhone'>
                <el-input v-model="newAdd.addPhone" clearable :disabled="newDis"></el-input>
            </el-form-item>
            <el-form-item 
                label="邮箱" 
                prop="addEmail">
                <el-input v-model="newAdd.addEmail" clearable :disabled="newDis"></el-input>
            </el-form-item>
            <el-form-item label="职业">
                <el-input v-model="newAdd.addOccupation" clearable :disabled="newDis"></el-input>
            </el-form-item>
            <el-form-item label="地区">
                <el-input v-model="newAdd.addRegion" clearable :disabled="newDis"></el-input>
                <!-- <el-select v-model="newAdd.addRegion" placeholder="省级地区" class="filter-item" @change="changeQueryProvince" clearable :disabled="newDis">
                    <el-option v-for="(item) in provinceList" :key="item.id" 
                        :label="item.regionName" :value="item.id" />
                </el-select> -->
            </el-form-item>
            <el-form-item label="金额">
                <el-input v-model="newAdd.addPayAmount" clearable :disabled="newDis"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="sub('ruleForm')" v-loading.fullscreen.lock="fullscreenLoading" v-if="!newDis">
                提 交
            </el-button
            >
        </span>
    </el-dialog>
</template>
<script>
// import { getSystemRegions } from "@/apis/api.js";
export default {
    props: {
        //是否开启
        addVisible: {
            type: Boolean
        },
        //标题
        titlename: {
            type: String
        },
        //是否可编辑
        newDis:{
            type:Boolean
        },
        //编辑/查看信息
        editRow:{
            type:Object
        }
    },
    data() {
        return {
            fullscreenLoading: false,
            newAdd: {
                id:'',
                addname: '',
                addSex: '男',
                addAge: '',
                addPhone: '',
                addEmail: '',
                addOccupation: '',
                addRegion: '',
                addPayAmount:''
            },
            rules:{}
        }
    },
    watch:{
        titlename:{
            handler:function(val){
                if(val=='用户数据详情'){
                    this.rules={}
                }
                if(val=='编辑用户数据'||'新建用户数据'){
                    this.rules={
                        addname:[
                            { required: true, message: '请输入名称', trigger: 'blur' },
                            { max: 32, message: '不能超过 32 个字符', trigger: 'blur' }
                        ],
                        addEmail:[
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
                        ],
                        addPhone:[
                            { required:true, message: '请输入手机号码', trigger: 'blur'},
                            {validator:function(rule,value,callback){
                                if(/^1[34578]\d{9}$/.test(value) == false){
                                    callback(new Error("请输入正确的手机号"));
                                }else{
                                    callback();
                                }
                            }, trigger: 'blur'}
                        ],
                    }
                }

            }
        },
        editRow: {
            handler: function (val) {
                this.newAdd.id=val.id
                this.newAdd.addname=val.sourceName
                this.newAdd.addSex=val.sex
                this.newAdd.addAge=val.age
                this.newAdd.addPhone=val.phone
                this.newAdd.addEmail=val.email
                this.newAdd.addOccupation=val.occupation
                this.newAdd.addRegion=val.region
                this.newAdd.addPayAmount=val.payAmount
            }
        }
    },
    methods: {
        // 关闭窗口
        cancel() {
            this.$emit('cancel', false)
            this.remove()
        },
        // 提交
        sub(ruleForm) {
            this.$refs[ruleForm].validate((valido) => {
                if (valido) {
                    const query = {
                        id:this.newAdd.id,
                        age:this.newAdd.addAge,
                        email:this.newAdd.addEmail,
                        occupation:this.newAdd.addOccupation,
                        payAmount:this.newAdd.addPayAmount,
                        phone:this.newAdd.addPhone,
                        region:this.newAdd.addRegion,
                        sex:this.newAdd.addSex=='男'?1:this.newAdd.addSex=='女'?2:'',
                        // sex:Number(this.newAdd.addSex),
                        sourceName:this.newAdd.addname
                    }
                    if (!query.sourceName) {
                        this.$message({
                            message: '请补全信息再进行提交',
                            type: 'warning'
                        })
                        return false
                    }
                    if(this.titlename==='新建用户数据'){
                        this.newUser(query)
                    }
                    if(this.titlename==='编辑用户数据'){
                        this.changeUser(query)
                    }
                }
            })
        },
        // 新增
        newUser(val) {
            this.$apis.
                userAdd(val).then(res=>{
                    this.$emit('cancel', false)
                    this.remove()
                })
            // this.fullscreenLoading = true
        },
        // 修改
        changeUser(val){
            this.$apis.
                userUpdate(val).then(res=>{
                    this.$emit('cancel', false)
                    this.remove()
                })
            // this.fullscreenLoading = true
        },
        // 清除数据
        remove() {
            this.newAdd= {
                addname: '',
                addSex: '',
                addAge: '',
                addPhone: '',
                addEmail: '',
                addOccupation: '',
                addRegion: '',
                addPayAmount:''
            }
            this.rules={}
        }
    }
}
</script>
<style scoped></style>
